<template>
    <div class="common userAdmin">
        <innerCommon 
            :location="location"
        >
            <template slot="left">
                <span>用户列表</span>
                <a-input-search class="inputStyle" style="margin-left:10px;" placeholder="搜索" enter-button @search="onSearch" v-model="searchValue" />
            </template>
            <div slot="right">
                <download 
                    :name="'导出'"
                    :api="'manage/admin/exportAdmin'"
                    fileName="用户列表.xls"
                    v-if="list.length>0"
                    :methods="'post'"
                    style="margin-right:10px;"
                ></download>
                <a-button type="primary" @click="toAdd()">新增</a-button>
            </div>
            <div slot="table" class="tableWrap">
                <a-table 
                    size="middle"
                    :columns="columns" 
                    :data-source="list" 
                    :pagination="pagination"
                    :rowKey="record=>record.id"
                    @change="changePage"
                    :locale="{'emptyText': '暂无数据'}"
                    bordered>
                    <div slot="address" slot-scope="index,record">
                        {{(record.province||'')+(record.city||'')+(record.district||'')+(record.address||'')}}
                    </div>
                    <div slot="status" slot-scope="index,record">
                        <span v-if="record.status==0" style="color:green">正常</span>
                        <span v-else style="color:red">已冻结</span>
                    </div>
                    <div slot="action" slot-scope="index,record" class="tableAction">
                        <span @click="editAdmin(record)">修改</span>
                        <span @click="updateStatus(record)">{{record.status==1?'解冻':'冻结'}}</span>
                        <confirmBox
                            @handleOk="deleteProgram(record.id)"
                            :typeName="'删除'"
                            :noticeInfo="record.name"
                            :noticeType="'用户'"
                        ></confirmBox>
                    </div>
                </a-table>
            </div>
        </innerCommon>

        <a-modal
            :title="type==0?'新增':'修改'"
            :visible="addModal"
            @cancel="addModal=false"
            okText="确定"
            class="addSchoolUser"
            cancelText="取消"
            @ok="addAdmin()"
            :destroyOnClose="true"
            width="700px"
            >
            <div>
                <eform
                    v-if="fields||type==0"
                    :formData="formData"
                    class="form"
                    ref="form"
                    :fields="fields"
                >
                    <eAddress
                        :detailAddress="true"
                        slot="address"
                        v-decorator="['addressValue',{rules: [{ required: true, message: '请选择地址' }]}]"
                        :defaultAddress='defaultAddress'
                        @changeAddress="changeAddress"
                        :isAllAddress="true"
                    ></eAddress>
                    <div slot="auth" class="auth" >
                        <a-checkbox-group 
                            :options="authList" 
                            :defaultValue="defaultAuth"
                            v-decorator="['routeAuth',{rules: [{ required: true, message: '请选择权限' }]}]"
                        />
                    </div>
                </eform>
            </div>
        </a-modal>
    </div>
</template>
<script>
const columns=[
    {
        title: '序号',
        dataIndex: 'index',
        width:70
    },{
        title: '子管理员姓名',
        dataIndex: 'name'
    },{
        title: '账号',
        dataIndex: 'account'
    },{
        title: '联系地址',
        scopedSlots: { customRender: 'address' },
    },{
        title: '1+X管理',
        dataIndex: 'onePlus',
    },{
        title: '教学课堂管理',
        dataIndex: 'course'
    },{
        title: '信息发布管理',
        dataIndex: 'infoPublish'
    },{
        title: '用户管理',
        dataIndex: 'user',
    },{
        title: '创建时间',
        dataIndex: 'createTime',
    },{
        title: '状态',
        scopedSlots: { customRender: 'status' },
        width:100
    },{
        title: '操作',
        scopedSlots: { customRender: 'action' },
        width:220
    }
]


import eAddress from "@/components/common/eAddress"
import eform from "@/components/common/form"
import download from "@/components/common/download"
import innerCommon from "@/components/common/innerCommon"
import confirmBox from "@/components/common/confirmBox"
import {
    getAdminListApi,
    updateAdminUserApi,
    addAdminUserApi,
    deleteAdminApi
} from "@/request/api"
export default {
    name:"userAdmin",
    components:{innerCommon,confirmBox,download,eform,eAddress},
    created(){
        this.location=[{
            name:"用户管理",
            path:''
        },{
            name:"子管理员",
            path:''
        }]
        this.init()
    },
    watch:{
        searchValue:function(val){
            this.searchValue=val.trim()
        }
    },
    data(){
        let validateName=(rule,value,callback)=>{
            if(value){
                if(value.trim().length === 0){
                    callback(new Error('姓名不能全是空格'))
                }else if(value.length>6){
                    callback(new Error('姓名长度不能超过6'))
                }else{
                    callback()
                }
            }else{
                callback()
            }
        }
        const formData=[
            {
                label:"姓名",
                prop:"name",
                placeholder:'请输入姓名',
                rules:[{required:true,message:'请输入姓名'},{validator:validateName}],
            },{
                label:"账号",
                prop:"account",
                placeholder:'请输入账号',
                rules:[{required:true,message:'请输入账号'}],
            },{
                label:"地址",
                scopedSlots: { customRender: 'address'},
            },{
                label:"权限设置",
                scopedSlots: { customRender: 'auth'},
            }
        ]
        return{
            formData,
            columns,
            list:[],
            location:[],
            searchInfo:{
                page:1,
                pageSize:10,
                keyword:''
            },
            pagination:{pageSize:10,total:0,current:1},
            searchValue:'',
            addModal:false,
            fields:null,
            type:0,
            defaultAddress:[],
            authList:[
                {'label':'1+X管理','value':'1'},
                {'label':'教学课堂管理','value':'2'},
                {'label':'信息发布管理','value':'3'},
                {'label':'用户管理','value':'4'},
            ],
            selectAuth:[],
            defaultAuth:[]
        }
    },
    methods:{
        init(){
            this.getToken(getAdminListApi,this.searchInfo,res=>{
                this.list=res.data.rows.map((item,index)=>({
                    ...item,
                    'index':(this.searchInfo.page-1)*10+index+1,
                    'onePlus':item.routeAuth.indexOf('1')!=-1?'是':'否',
                    'course':item.routeAuth.indexOf('2')!=-1?'是':'否',
                    'infoPublish':item.routeAuth.indexOf('3')!=-1?'是':'否',
                    'user':item.routeAuth.indexOf('4')!=-1?'是':'否',
                    }))
                this.pagination.total=res.data.count
            })
        },
        changePage(data){
            this.searchInfo.page=data.current
            this.pagination.current=data.current
            this.init()
        },
        toAdd(){
            this.addModal=true
            this.type=0
            this.fields=null
            this.defaultAuth=[]
            this.defaultAddress=[]
        },
        editAdmin(data){
            this.addModal=true
            this.type=1
            this.fields=data
            this.defaultAddress=[data.province,data.city,data.district,data.address]
            this.defaultAuth=data.routeAuth
            this.fields.addressValue=this.defaultAddress
        },
        deleteProgram(id){
            this.getToken(deleteAdminApi,{userId:id},res=>{
                this.$message.success(res.message)
                this.init()
            })
        },
        handleChange(data){
            this.searchInfo.edPhase=data
            this.searchInfo.page=1
            this.pagination.current=1
            this.init()
        },
        onSearch(data){
            this.searchInfo.keyword=data
            this.searchInfo.page=1
            this.pagination.current=1
            this.init()
        },
        changeAddress(data){
            if(data[0]&&data[3]){
                this.$refs.form.form.setFieldsValue({['addressValue']:data})
            }else{
                this.$refs.form.form.resetFields(['addressValue'])
            }
        },
        updateStatus(data){
            this.$confirm({
                title: data.status==0?'冻结后，用户“'+data.name+'”将无法登录平台，确定冻结该账户吗？':'解冻后，用户“'+data.name+'”将可以登录平台，确定解冻该账户吗？',
                cancelText:"取消",
                okText:'确定',
                onOk:()=>{
                    handleOk()
                },
                onCancel() {
                },
            });
            let handleOk=()=>{
                this.getToken(updateAdminUserApi,{'userId':data.id,'status':data.status==0?1:0},res=>{
                    this.$message.success(res.message)
                    this.init()
                })
            }
        },
        addAdmin(){
            this.$refs.form.form.validateFields().then(res=>{
                let formData={
                    ...res,
                    'province':res.addressValue[0]||'',
                    'city':res.addressValue[1]||'',
                    'district':res.addressValue[2]||'',
                    'address':res.addressValue[3],
                }
                let api
                if(this.type==0){
                    api=addAdminUserApi
                }else{
                    api=updateAdminUserApi
                    formData={...formData,'userId':this.fields.id}
                }
                this.getToken(api,formData,data=>{
                    this.$message.success(data.message)
                    this.addModal=false
                    this.init()
                })
            })
        }
    }
}
</script>
<style lang="stylus">
.addSchoolUser
    .auth
        label
            margin-bottom:20px;
</style>
